<template>
	<el-dialog title="交班" :visible.sync="changeWorkVisible" append-to-body width="80%" center>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="交班" name="first">
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form label-width="80px">
							<el-form-item label="当班时间:">{{ dataInfo.startTime }}</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="8">
						<el-form label-width="80px">
							<el-form-item label="交班时间:">{{ dataInfo.endTime }}</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="8">
						<el-form label-width="80px">
							<el-form-item label="交班人:">{{ dataInfo.user.userName }}</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<avue-data-tabs :option="option"></avue-data-tabs>
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form>
							<el-form-item label="散客人数:">{{ dataInfo.sanKeNumber }}人</el-form-item>
							<el-form-item label="散客消费总额:" style="color: red;">￥{{ dataInfo.sanKeTotalMoney }}元</el-form-item>
							<el-form-item label="会员人数:">{{ dataInfo.memberNumber }}人</el-form-item>
							<el-form-item label="会员消费总额:" style="color: red;">￥{{ dataInfo.memberTotalMoney }}元</el-form-item>
							<el-form-item label="会员充值总额:" style="color: red;">￥{{ dataInfo.memberRechargeMoney }}元</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="8">
						<el-form>
							<el-form-item label="记账单位数:">{{ dataInfo.accountNumber }}人</el-form-item>
							<el-form-item label="记账单位消费总额:" style="color: red;">￥{{ dataInfo.accountTotalMoney }}元</el-form-item>
							<el-form-item label="预定餐台个数:">{{ dataInfo.reserveNumber }}个</el-form-item>
							<el-form-item label="预定餐台押金总额:" style="color: red;">￥{{ dataInfo.reserveTotalMoney }}元</el-form-item>
							<el-form-item label="综合收入:" style="color: red;">￥{{ dataInfo.totalMoney }}元</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="8">
						<el-form>
							<div><el-input v-model="turnInCash" placeholder="上缴现金"></el-input></div>
							<br />
							<div><el-input v-model="devolutionCash" placeholder="下放现金"></el-input></div>
							<br />
							<div><el-input v-model="remark" type="textarea" placeholder="备注"></el-input></div>
							<br />
							<div align="center"><el-button @click="submitChangeWork" type="primary">确认交班</el-button></div>
						</el-form>
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="交班记录" name="second">
				<ChangeWorkRecord ref="ChangeWorkRecordRef"></ChangeWorkRecord>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>

<script>
import { clearLoginInfo } from '@/utils';
import ChangeWorkRecord from './change-work-record.vue'
export default {
	components:{
		ChangeWorkRecord
	},

	data() {
		return {
			activeName:'first',
			turnInCash:null,
			devolutionCash:null,
			remark:'',
			dataInfo: {},
			option: {
				data: [
					{
						title: '前班结余',
						count: '',
						color: 'rgb(27, 201, 142)',
						key: '结'
					},
					{
						title: '本班总收入',
						count: '',
						color: 'rgb(230, 71, 88)',
						key: '总'
					},
					{
						title: '消费总人数',
						count: '',
						color: 'rgb(178, 159, 255)',
						key: '人'
					}
				]
			},
			changeWorkVisible:false,
		};
	},

	created() {},

	methods: {
		handleClick(tab,event){
			if(tab.name === 'second'){
				this.$refs.ChangeWorkRecordRef.getDataList()
			}
		},

		submitChangeWork() {
			if(this.turnInCash === null || this.devolutionCash === null){
				this.$message({
					message: '请输入上缴金额或下放金额',
					type: 'warning',
					duration: 1500,
				});
			}else{
				this.$http({
				url: this.$http.adornUrl(`/reception/tstorechangeworkrecord/save`),
				method: 'post',
				data: this.$http.adornData({
					userId: this.dataInfo.user.userId,
					userName: this.dataInfo.user.userName,
					sellerId: this.dataInfo.user.sellerId,
					startTime: this.dataInfo.startTime,
					endTime: this.dataInfo.endTime,
					individualGuestNumber: this.dataInfo.sanKeNumber,
					individualGuestMoney: this.dataInfo.sanKeTotalMoney,
					memberNumber: this.dataInfo.memberNumber,
					memberMoney: this.dataInfo.memberTotalMoney,
					memberRechargeMoney: this.dataInfo.memberRechargeMoney,
					accountUnitNumber: this.dataInfo.accountNumber,
					accountUnitMoney: this.dataInfo.accountTotalMoney,
					reserveNumber: this.dataInfo.reserveNumber,
					reserveMoney: this.dataInfo.reserveTotalMoney,
					// integralConsumeMoney: this.dataInfo.integralConsumeMoney,
					// integralChangeMoney: this.dataInfo.integralChangeMoney,
					totalMoney: this.dataInfo.totalMoney,
					//otherIncomeMoney: this.dataInfo.otherIncomeMoney,
					turnInCash: this.turnInCash,
					devolutionCash: this.devolutionCash,
					remark: this.remark
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.$message({
						message: '交班成功',
						type: 'success',
						duration: 1500,
					});
					this.changeWorkVisible = false
					clearLoginInfo();
					this.$cookie.delete("sellerInfo")
					this.$cookie.delete("seller")
					this.$router.push({ name: 'login' });
				} else {
					this.$message.error(data.msg);
				}
			});
			}

		},

		getData() {
			this.changeWorkVisible = true
			this.$http({
				url: this.$http.adornUrl('/reception/tstorechangeworkrecord/changeWorkData'),
				method: 'get'
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataInfo = data.changeWorkInfo;
					if( data.changeWorkInfo.devolutionCash === null){
						this.option.data[0].count = '0元'
					}else{
						this.option.data[0].count = this.dataInfo.devolutionCash + '元';
					}

					this.option.data[1].count = this.dataInfo.totalMoney + '元';
					this.option.data[2].count = this.dataInfo.totalNumber + '人';
				} else {
					this.dataInfo = [];
				}
			});
		}
	}
};
</script>

<style></style>
